import React from 'react';
import {Input, Select, Form, Button, Checkbox,DatePicker} from 'antd';
import Utils from '../../utils/utils'

const FormItem = Form.Item;

class FiterForm extends React.Component{

    constructor() {
        super();
        this.state = {

        }
    };

    // 向父元素传值
    handleFiterSubmit = () => {
        let filedsValue = this.props.form.getFieldsValue();
        this.props.filterSubmit(filedsValue);
    };

    handleReset = () => {
      this.props.form.resetFields();
    };

    initFormList = () => {
        const {getFieldDecorator} = this.props.form;
        const formList = this.props.formList;
        const formItemList = [];
        if(formList && formList.length > 0) {
            formList.forEach((item,index) => {
                let label = item.label;
                let field = item.field;
                let initialValue = item.initialValue || '';
                let placeholder = item.placeholder;
                let width = item.width;
                if(item.type === 'SELECT'){
                    const SELECT = <FormItem lable={label} key={Math.random()*1000}>
                        {
                            getFieldDecorator([field],{
                                initialValue
                            })(
                                <Select
                                    style={{width: width}}
                                    placeholder={placeholder}
                                >
                                    {Utils.getOptionList(item.list)}
                                </Select>
                            )
                        }
                    </FormItem>;
                    formItemList.push(SELECT);
                }else if(item.type === 'INPUT'){
                    const INPUT = <FormItem lable={label} key={Math.random()*1000}>
                        {
                            getFieldDecorator([field],{
                                initialValue
                            })(
                                <Input type="text" placeholder={placeholder}/>
                            )
                        }
                    </FormItem>;
                    formItemList.push(INPUT);
                }else if(item.type === 'CHECKBOX'){
                    const CHECKBOX = <FormItem lable={label} key={Math.random()*1000}>
                        {
                            getFieldDecorator([field],{
                                valuePropName:'checked',
                                initialValue
                            })(
                                <Checkbox>
                                    {label}
                                </Checkbox>
                            )
                        }
                    </FormItem>;
                    formItemList.push(CHECKBOX);
                }else if(item.type === "时间查询") {
                    const begin_time = <FormItem label="订单时间"  key={Math.random()*1000}>
                        {
                            getFieldDecorator('begin_time')(
                                <DatePicker showTime={true} format="YYYY-MM-DD HH:mm:ss" />
                            )
                        }
                    </FormItem>;
                    formItemList.push(begin_time);
                    // colon 去掉label 后面的 :(冒号)
                    const end_time = <FormItem label="~" colon={false} key={Math.random()*1000}>
                        {
                            getFieldDecorator('end_time')(
                                <DatePicker showTime={true} format="YYYY-MM-DD HH:mm:ss" />
                            )
                        }
                    </FormItem>;
                    formItemList.push(end_time);
                }else if(item.type === "DATE") {
                    const DATE = <FormItem label={label}  key={Math.random()*1000}>
                        {
                            getFieldDecorator('DATE')(
                                <DatePicker showTime={true} format="YYYY-MM-DD HH:mm:ss" />
                            )
                        }
                    </FormItem>;
                    formItemList.push(DATE);
                }
            });
            return formItemList
        }
    };

    render() {
        return (
            <Form layout="inline">
                {this.initFormList()}
                <FormItem>
                    <Button type="primary" style={{margin: '0 20px'}} onClick={this.handleFiterSubmit}>查询</Button>
                    <Button onClick={this.handleReset}>重置</Button>
                </FormItem>
            </Form>
        )
    }
}

FiterForm = Form.create()(FiterForm);

export default FiterForm